<template>
  <div>
    <!--<div>{{ message }}</div>-->
    <div class="form_control d-flex flex-column justify-content-center align-items-center bg-dark text-light">
      <form class="text-center">
        <div class="form-group form-inline">
          <label class="mr-3">Account</label>
          <input class="form-control" v-model="name0" type="text" placeholder="请输入账号" @keyup.enter="next_focus()" autofocus required>
        </div>
        <div class="form-group form-inline">
          <label class="mr-3">Account</label>
          <input class="form-control" v-model="name1" type="text" placeholder="请输入账号" @keyup.enter="next_focus()" autofocus required>
        </div>
        <div class="form-group form-inline">
          <label class="mr-3">Account</label>
          <input class="form-control" v-model="name" type="text" placeholder="请输入账号" @keyup.enter="next_focus()" autofocus required>
        </div>
        <div class="form-group form-inline">
          <label class="mr-1">Password</label>
          <input class="form-control" type="password" v-model="password" placeholder="请输入密码" @keyup.enter="equalSubmit()" required>
        </div>
        <div class="form-group">
          <label>
            <input type="checkbox">
          </label>
          <button class="btn btn-primary" @click="submit()">登录</button>
          <button type="reset" class="btn btn-info">取消</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      message: '这里是login',
      loginForm: {
        name: '',
        password: ''
      },
      name0: '',
      name1: '',
      name: '',
      password: '',
      judge: false
    }
  },
  methods: {
    next_focus: function () {
      let inputList = document.getElementsByTagName('input')
      // console.log(inputList)
      for (let i = 0; i < inputList.length; i++) {
        if (!inputList[i].value) {
          inputList[i].focus()
          break
        }
      }
    },
    submit: function () {
      if (this.name && this.name0 && this.name1 && this.password) {
        this.$router.push('/home')
        console.log('验证ok')
      } else {
        console.log('验证不通过')
      }
    },
    equalSubmit: function () {
      this.submit()
    }
  }
}
</script>

<style scoped>
  .form_control{
    width: 100vw;
    height: 100vh;
  }
</style>
